<template>
  <div class="charts" ref="echartsRef"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

import * as echarts from 'echarts'
import geoJson from './china.json'
echarts.registerMap('china', geoJson as any)

const echartsRef = ref()
onMounted(() => {
  const chart = echarts.init(echartsRef.value)
  chart.setOption({
    geo: [
      {
        map: 'china',
        roam: true,
        left: 'center',
        top: 'middle',
        zoom: 1.5,
        label: {
          show: true,
          color: '#fff',
          fontSize: 14
          // rotate: 20
        },
        itemStyle: {
          opacity: 0.8,
          color: {
            colorStops: [
              {
                offset: 0,
                color: 'rgb(36, 206, 243)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgb(30, 99, 173)' // 100% 处的颜色
              }
            ]
          }
        },
        emphasis: {
          itemStyle: {
            color: '#8dd7fc'
          },
          label: {
            color: '#fff',
            fontSize: 18
          }
        }
      }
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    },
    series: [
      {
        type: 'lines',
        effect: {
          show: true,
          symbol: 'path://M1086.261857 669.356465c-9.961897-1.660316-26.537387-3.320632-49.754142-4.980948-81.272477-9.934225-230.534901-29.802675-328.382867-43.057533l-21.58411-6.641265h-3.320633l-49.726469-14.887501c-4.980949 101.030239-11.622213 185.51266-19.923794 250.126631v11.594541l24.904743 11.594542 77.924172 36.44394c3.320632 1.660316 4.980949 4.980949 4.980948 8.273909l1.660317 61.293338v4.980949c0 3.320632-1.660316 6.613593-4.980949 4.953277l-127.705986-21.528767c-9.961897 24.849399-19.896122 38.104256-34.811295 39.736901h-1.660317c-14.942846 0-26.565059-13.227186-34.838967-39.736901l-127.705986 19.86845c-3.320632 0-4.980949-1.660316-4.980948-4.980948v-4.953277l1.660316-61.293338c0-3.320632 1.660316-6.641265 4.980948-8.301581l77.951845-36.416268 24.87707-11.622214v-11.566869c-6.641265-64.613971-11.622213-149.096392-16.603161-250.154303l-51.386786 14.942845h-4.980949l-21.58411 4.980949c-97.847966 11.566869-247.11039 29.802675-328.382867 39.7369-23.216754 3.320632-39.792244 4.980949-49.754141 4.980949-26.537387 3.320632-28.197703-29.830347-8.301581-41.424889 3.320632-1.660316 63.036671-33.123308 137.667883-74.548196v-43.057533c0-16.57549 13.282529-29.830347 29.885691-29.830347 16.547818 0 29.830347 13.282529 29.830347 29.830347v9.934225a4817.960816 4817.960816 0 0 0 132.686934-71.227564v-49.698797c0-16.57549 13.282529-29.802675 29.858019-29.802675s29.830347 13.227186 29.830348 29.802675v16.57549c26.565059-13.282529 48.121497-26.509715 63.03667-34.783624-1.660316-193.814241 13.282529-342.910634 67.989948-369.420349 3.320632-1.660316 4.980949-1.660316 8.30158-3.320632 1.660316 0 4.980949 0 6.641265-1.632644h6.641265c1.660316 0 4.980949 0 6.641265 1.660316 3.320632 0 4.980949 1.660316 8.273908 3.320632 54.73509 26.482043 69.650263 175.578435 64.669315 369.392677 14.942846 8.273909 36.526956 19.86845 61.376355 33.123308v-16.57549c0-16.547818 13.282529-29.802675 29.858019-29.802676 16.603162 0 29.858019 13.254857 29.858019 29.802676v49.698797c41.45256 23.189083 87.886069 48.038481 132.686935 72.88788v-13.254857c0-16.57549 13.282529-29.802675 29.830347-29.802676 16.603162 0 29.885691 13.227186 29.885691 29.802676v49.698797c76.263856 41.397217 135.979895 74.548196 137.640211 76.180841 28.197703 11.622213 26.537387 46.405837-1.660316 43.085204z',
          symbolSize: 30,
          color:'orange'
        },
        data: [
          {
            coords: [
              [116.41995, 40.18994],
              [102.712251, 25.040609]
            ],
            lineStyle: {
              color: '#fff',
              width: 5
            }
          },
          {
            coords: [
              [87.617733,43.792818],
              [126.642464,45.756967]
            ],
            lineStyle: {
              color: '#fff',
              width: 5
            }
          }
        ]
      }
    ]
  })
})
</script>

<style scoped lang="scss"></style>
